const { configure } = require('@testing-library/react')
const CracoLessPlugin = require('craco-less')
const path = require('path')
 
const pathResolve = pathUrl => path.join(__dirname, pathUrl)
 
module.exports = {
  devServer:{
    port:8000,
    proxy:{
      '/api':'http://localhost:3001'
    }
  },
  webpack: {
    configure(webpackConfig){
      //抽离公共代码
      if(webpackConfig.mode==='production'){
        if(webpackConfig.optimization==null){
          webpackConfig.optimization={}
        }
        webpackConfig.optimization.splitChunks={
          chunks:'all',
          cacheGroups:{
            antd:{
              name:'antd-chunk',
              test:/antd/,
              priority:100
              
            },
            ReactDOM:{
              name:'react-Dom-chunk',
              test:/react-dom/,
              priority:99,
            },
            vendors:{
              name:'vendors-chunk',
              test:/node_modules/,
              priority:98,
            }
          }
        }
      }
      return webpackConfig
    },
    alias: {
      '@@': pathResolve('.'),
      '@': pathResolve('src'),
      '@assets': pathResolve('src/assets'),
      '@common': pathResolve('src/common'),
      '@components': pathResolve('src/components'),
      '@hooks': pathResolve('src/hooks'),
      '@pages': pathResolve('src/pages'),
      '@store': pathResolve('src/store'),
      '@utils': pathResolve('src/utils')
      // 此处是一个示例，实际可根据各自需求配置
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      }
    }
  ],
    
    "scripts": {  
        "start": "craco start --config config/craco-config-with-custom-name.js"  
     
}

}